// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { goodsAppraiseList } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, RnFlatList, CacheImage, Rating } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { merchantsDefault } from '../../util/images.js'
import { press, size, ScreenWidth, pathHead , defaultDataList,onEndReached,onRefresh ,concatDataList,defaultPage} from '../../util/utils.js'

class Appraise extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      searchBackgroundColor: '#ccc',
      loading: false,
      list: {
        total: 0,
        size: 10,
        current: 1,
        pages: 1,
        records: []
      }
    }
  }

  componentDidMount() {
    this.loading = Toast.loading('加载中')

    this.handleSearch({
      current: 1,
    })
  }

  handleSearch(options) {
    const { productId } = this.props
    goodsAppraiseList({
      productId,
      size: 10,
      ...options
    }).then(res => {
      Portal.remove(this.loading)

      this.setState({
        list: {
          ...res.data,
          records: this.state.list.records.concat(res.data.records)
        }
      })
    }).catch(error => {
      console.log(error, 11111)
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    const { productId } = this.props
    const { list: { size } } = this.state
    goodsAppraiseList({
      productId,
      current: 1,
      size: 10,
    }).then(res => {
      this.setState({
        list: res.data,
        refreshing: false
      })
    }).catch(error => {
      console.log(error, 11111)
    })
  }

  onEndReached = () => {
    const { list: { current, size, records, total } } = this.state
    if (records.length < total) {
      this.handleSearch({
        current: current + 1,
      })
    }
  }

  onScroll = (e) => {
    const { searchBackgroundColor } = this.state
    if (e.nativeEvent.contentOffset.y >= size(366) - 44) {
      this.setState({
        searchBackgroundColor: '#e43130'
      })
    } else {
      this.setState({
        searchBackgroundColor: 'transparent'
      })
    }
  }

  render() {
    const { refreshing, list } = this.state

    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="评论列表"
          back={true}
        />
        <View style={{
          flex: 1
        }}>
          <RnFlatList
            style={{
              flex: 1,
            }}
            onScroll={this.onScroll}
            refreshing={refreshing}
            onRefresh={this.onRefresh}
            onEndReached={this.onEndReached}
            numColumns={1}
            removeClippedSubviews={true}
            data={list}
            renderItem={({ item }) => {
              return (
                <View style={{
                  marginLeft: 15,
                  paddingRight: 15,
                  paddingVertical: 10,
                  borderBottomColor: '#e5e5e5',
                  borderBottomWidth: .5
                }}>
                  <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    marginBottom: 8
                  }}>
                    <CacheImage
                      resizeMode='cover'
                      style={{
                        width: 24,
                        height: 24,
                        overflow: 'hidden',
                        borderRadius: 12,
                        marginRight: 10
                      }}
                      source={{ uri: `${pathHead}${item.avatar}` }}
                      
                    />
                    <Text style={{ fontSize: 12, color: '#333', lineHeight: 16, marginRight: 10 }}>{item.nickname}</Text>
                    <Rating rating={item.score}></Rating>
                    <Text style={{ flex: 1, fontSize: 12, color: '#999', lineHeight: 16, textAlign: 'right' }}>{item.createTime}</Text>
                  </View>
                  <View style={{ marginVertical: 3 }}>
                    <Text style={{ fontSize: 14, color: '#333', lineHeight: 21, }}>{item.content}</Text>
                  </View>
                  <View style={{ marginTop: 8 }}>
                    {item.imageList.map((imageListItem, imageListIndex) => {
                      return (
                        <CacheImage
                          key={imageListIndex}
                          resizeMode='cover'
                          style={{
                            width: (ScreenWidth - 30 - 30) / 4 - 2,
                            height: (ScreenWidth - 30 - 30) / 4 - 2,
                            marginRight: 15,

                          }}
                          source={{ uri: `${pathHead}${imageListItem.url}` }}
                          
                        />
                      )
                    })}
                  </View>
                </View>
              )
            }}
          />
        </View>
      </View >
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(Appraise))
